
<script type="text/javascript" src="<?php echo base_url('skin/js/userprofile.js'); ?>"></script>	
<div id="phoneGallery" class="top20marg userprofilepage" >
    
    <div class="galleryRight"></div>
    	
    <div class="wizard">
        <a class="current done" href="<?php echo site_url('gadgetdetails'); ?>">
            <span class="wiz1"></span><p>Gadget details</p>
        </a>
        <a class="current done" href="<?php  echo site_url('promo'); ?>">
            <span class="wiz2"></span><p>Choose your promo</p>
        </a>
        <a class="current done" href="<?php  echo site_url('prepaid'); ?>">
            <span class="wiz3"></span><p class="abs">Enter your <br>mobile number</p>
        </a>
        <a class="current" href="<?php  echo site_url('userprofile'); ?>">
            <span class="wiz42"></span><p class="absd">Complete<br>your profile</p>
        </a>
    </div>
    
    
    <div class="mobileHeader">
        <h5 class="hidden textBlue">Select your device</h5>
        <h5 class="hidden textBlue">Choose your promo</h5>
        <h5 class="hidden textBlue">Input your mobile number</h5>
        <h5 class="textBlue">Complete your profile</h5>
        <h5 class="hidden textBlue">Select your preferred Globe Store branch for handset pickup</h5>
    </div>
    
    <div class="clear"></div>
    
    <div class="width960c">
        <div class="deviceInfosIns marg40 floatLeft">
            <div  class="deviceBox active">
                <p><b>Gadget:</b><p>
                <p>
                    <?php echo $_COOKIE['tiangge_model']; ?> - 
                    <?php echo $_COOKIE['tiangge_price']; ?>
                </p>
            </div>

            <div class="promoBox active">
                <p><b>Promo:</b><p>
                <p>
                <?php 
                    $user_agent = $_SERVER['HTTP_USER_AGENT']; 
                    $promo =  $_COOKIE['tiangge_promo']; 
                    if (strpos( $user_agent, 'Safari') !== false) {
                        if(isset($_COOKIE['tiangge_promoDesc'])) {
                            $promoDesc =  $_COOKIE['tiangge_promoDesc'];
							echo $promo. str_replace("john",",",$promoDesc);
                        }
                    } else {
						if(isset($_COOKIE['tiangge_promoDesc'])) {
							echo $promo. $_COOKIE['tiangge_promoDesc'];
						}
					}
                ?>
                </p>
            </div>
                        
            <div class="commitmentBox active">
                <p><b>Registration Period </br> and Cash Back:</b><p>
                <p><?php echo $_COOKIE['tiangge_commitmentBox']; ?></p>
            </div>

            <div class="prepaidBox active">
                <p><b>Mobile Number:</b><p>
                <p><?php echo $_COOKIE['tiangge_mobtel']; ?></p>
            </div>

            <div class="profileBox">
                <p><b>Profile:</b><p>
                <p class="pnone">None</p>
                <p style="display:none" id="pname"><span id="name"></span></p>
                <p style="display:none" id="pemail">Email Address:<br><span id="email"></span></p>
                <p style="display:none" id="pdob">Date of Birth:<br><span id="dob"></span></p>
                <p style="display:none" id="padd">Home Address:<br><span id="add"></span>
            </div>
                            
        </div>
            
        <div id="userProf" class="floatLeft boxRight ">
            
            <div  class="marg20Left">
                <p class="header30 marg20" id="top">User profile</p>

                <p class="text16 floatLeft marg0">Please provide the following:	</p>
                <p class="floatRight text16 marg0 redText">* Required fields</p>
                    
                <div class="clear"></div>

                <form id="userinfo" class="marg40" method="post" action="<?php echo base_url('index.php/summary'); ?>">
                <?php if(!empty($userinfo) && ($_COOKIE['tiangge_usertype']=="globe" || $_COOKIE['tiangge_mobtel']=="0")): ?>	
					<?php foreach($userinfo as $user){ ?>     
                    <div class="floatLeft width215 marg10Right">
                        <a name="name"></a>
                        <label class="text14">First name <span class="redText">*</span></label><a name="FName"></a>
                        <input type="text" id="Fname" name="Fname" class="inputText width185 marg10Top" autocomplete="off" maxlength="30" value="<?php echo $user["fName"]; ?>"/>
                    </div>
                    <div class="floatLeft width215 marg10Right">
                        <label class="text14">Middle name <span class="redText">*</span></label>
                        <input type="text" id="Mname" name="Mname" class="inputText width185 marg10Top" autocomplete="off" maxlength="30" value="<?php echo $user["mName"]; ?>"/>
                    </div>
                    <div class="floatLeft width215">
                        <label class="text14">Last name <span class="redText">*</span></label>
                        <input type="text" id="Lname" name="Lname" class="inputText width185 marg10Top" autocomplete="off" maxlength="30" value="<?php echo $user["lName"]; ?>"/>
                    </div>

                    <span class="clear"></span>

                    <div class="width215 marg10Top">
                        <label class="text14">Nickname (optional)</label>
                        <input type="text" id="Nname" name="Nname" class="inputText width185 marg10Top" autocomplete="off" maxlength="16" value="<?php echo $user["nName"]; ?>"/>
                    </div>

                    <div id="divEadd" class="width350 marg10Top">
                        <label class="text14">Email address<span class="redText">*</span></label>
                        <input type="text" id="Eadd" name="Eadd" class="inputText width300 marg10Top" maxlength="100" autocomplete="off" value="<?php echo $user["email"]; ?>"/>
                    </div>
                    <span id="email-error" style="display:none;color:red;font-size:13px;">Invalid email format</span>

                    <div class="width350 marg10Top">
                        <label class="text14">Other contact number (optional)</label>
                        <input type="text"  autocomplete="off" id="Othercont" name="Othercont" class="inputText width185 marg10Top" maxlength="11" value="<?php echo $user["otherCont"]; ?>"/>
                    </div>

                    <div class="width215 marg10Top posRel calendarBut">
                        <label class="text14">Date of birth<span class="redText">*</span></label><a name="address"></a>
                        <input type="text" id="datepicker" name="birthday" autocomplete="off" class="inputText width185 marg10Top" value="<?php echo $user["birthdate"]; ?>"/>
                    </div>


                    <div class="width100p marg10Top">
                        <label class="text14"><span>Home address</span><br>
                        <span>House/ Room/ Floor no./ Building name and Street name<span class="redText">*</span></span></label>
                        <input type="text" id="Address" name="Address" autocomplete="off" class="inputText width100p marg10Top" maxlength="150" value="<?php echo $user["street"]; ?>"/>
                    </div>

                    <div class="floatLeft width320 marg20Right marg10Top">
                        <label class="text14">Province<span class="redText">*</span></label>
                        <select type="text" id="Province" name="Province" class="width320 marg10Top" maxlength="10" value="<?php echo $user["province"]; ?>"></select>
                    </div>
                    <div class="floatLeft width320 marg10Top">
                        <label class="text14">City/ Town<span class="redText">*</span></label>
                        <select type="text" id="City" name="City" class="width320 marg10Top disable" maxlength="10" value="<?php echo $user["town"]; ?>"></select>
                    </div>

                    <span class="clear"></span>

                    <div class="floatLeft width320 marg20Right marg10Top">
                        <label class="text14">Area/ Barangay<span id="areabrgy" class="redText">*</span></label>
                        <select type="text" id="Barangay" name="Barangay" class="width320 marg10Top disable" maxlength="10" value="<?php echo $user["area"]; ?>"></select>
                    </div>
                    <div class="floatLeft width320 marg10Top">
                        <label class="text14">Postal code<span class="redText">*</span></label>
                        <select type="text" id="Pcode" name="Pcode" class="width320 marg10Top disable" maxlength="10" value="<?php echo $user["postalCode"]; ?>"></select>
                    </div>

                    <span class="clear"></span>
                    <a href="#" onclick="return false;" id="btn_next" class="buttonBlue floatRight marg20Top" ><span id="btn_next2">Next</span></a>					 
                    <span class="clear"></span>
                <?php   } ?>
					 
				<?php else: ?>
				<div class="floatLeft width215 marg10Right">
                        <label class="text14">First name <span class="redText">*</span></label>
                        <input type="text" id="Fname" name="Fname" class="inputText width185 marg10Top" autocomplete="off" maxlength="30"/>
                        </div>
                        <div class="floatLeft width215 marg10Right">
                        <label class="text14">Middle name <span class="redText">*</span></label>
                        <input type="text" id="Mname" name="Mname" class="inputText width185 marg10Top" autocomplete="off" maxlength="30"/>
                        </div>
                        <div class="floatLeft width215">
                        <label class="text14">Last name <span class="redText">*</span></label>
                        <input type="text" id="Lname" name="Lname" class="inputText width185 marg10Top" autocomplete="off" maxlength="30"/>
                        </div>
                        
                        <span class="clear"></span>
                        
                        <div class="width215 marg10Top">
                        <label class="text14">Nickname (optional)</label>
                        <input type="text" id="Nname" name="Nname" class="inputText width185 marg10Top" autocomplete="off" maxlength="16"/>
                        </div>
 
                        <div id="divEadd" class="width350 marg10Top">
                        <label class="text14">Email address<span class="redText">*</span></label>
                        <input type="text" id="Eadd" name="Eadd" class="inputText width300 marg10Top" maxlength="100" autocomplete="off"/>
                        </div>
						<span id="email-error" style="display:none;color:red;font-size:13px;">Invalid email format</span>
						
                        <div class="width350 marg10Top">
                        <label class="text14">Other contact number (optional)</label>
                        <input type="text"  autocomplete="off" id="Othercont" name="Othercont" class="inputText width185 marg10Top" maxlength="11"/>
                        </div>
                        
                         <div class="width215 marg10Top posRel calendarBut">
                        <label class="text14">Date of birth<span class="redText">*</span></label>
                        <input type="text" id="datepicker" name="birthday" autocomplete="off" class="inputText width185 marg10Top"/>
                        </div>
                        
                        
                        <div class="width100p marg10Top">
                        <label class="text14"><span>Home address</span><br>
						<span>House/ Room/ Floor no./ Building name and Street name<span class="redText">*</span></span></label>
                        <input type="text" id="Address" name="Address" autocomplete="off" class="inputText width100p marg10Top" maxlength="150"/>
                        </div>

                         <div class="floatLeft width320 marg20Right marg10Top">
                        <label class="text14">Province<span class="redText">*</span></label>
                         <select type="text" id="Province" name="Province" class="width320 marg10Top" maxlength="10"></select>
                        </div>
                         <div class="floatLeft width320 marg10Top">
                        <label class="text14">City/ Town<span class="redText">*</span></label>
                         <select type="text" id="City" name="City" class="width320 marg10Top disable" maxlength="10"></select>
                        </div>
                        
                        <span class="clear"></span>
                        
                        <div class="floatLeft width320 marg20Right marg10Top">
                        <label class="text14">Area/ Barangay<span id="areabrgy" class="redText">*</span></label>
						<select type="text" id="Barangay" name="Barangay" class="width320 marg10Top disable" maxlength="10"></select>
                        </div>
                        <div class="floatLeft width320 marg10Top">
                        <label class="text14">Postal code<span class="redText">*</span></label>
                        <select type="text" id="Pcode" name="Pcode" class="width320 marg10Top disable" maxlength="10"></select>
                        </div>
                        
						<span class="clear"></span>
                        <a href="#." id="btn_next" class="buttonBlue floatRight marg20Top" ><span id="btn_next2">Next</span></a>	
					 <?php endif;?>
					<span class="clear"></span>
				</form>
            </div>
               
        </div><!---BOX RIGHT END---> 
        <div class="clear"></div>
            
    </div>
</div>

<script type="text/javascript">
    jQuery(function(){
        var year = new Date().getFullYear();
        year = year - 7;
        var month = new Date().getMonth();
        month = 12 - (month + 1);
        var m = " +"+month+"m";
        var days = new Date(year, month+1, 0).getDate();
        var day = new Date().getDate();
        day = days - day;
        var d = "+"+day+"d";
        jQuery( "#datepicker" ).datepicker({
          showOn: "button",
          buttonImage: "../skin/images/icons/calendar.png",
          buttonImageOnly: true,
          changeMonth: true,
          changeYear: true,
          yearRange:"-114:-7",
          maxDate:"-7y",
          defaultDate: "1/1/"+year
         // maxDate:"-7y "+d +m
        });

    });
</script>
<script type="text/javascript" src="<?php echo base_url('skin/js/postalcode.js'); ?>"></script>